// 单击事件
let eventObject = {
  // 单击事件
  tap(element, callback) {
    let x0 = null
    let y0 = null
    let x1 = null
    let y1 = null
    // 监听元素的touchstart
    element.addEventListener(
      'touchstart',
      function (e) {
        let { clientX, clientY } = e.touches[0]
        x0 = clientX
        y0 = clientY
      },
      false
    )
    // 监听元素的touchend
    element.addEventListener(
      'touchend',
      function (e) {
        let { clientX, clientY } = e.changedTouches[0]
        x1 = clientX
        y1 = clientY
        // 判断不是滑动
        if (Math.abs(x1 - x0) < 10 && Math.abs(y1 - y0) < 10) {
          console.log(this)
          callback()
        }
      },
      false
    )
  },
  // 长按事件
  longtap(element, callback) {
    // id是定时器函数的编号
    let id = null
    // 触摸点开始的坐标
    let x0 = null
    let y0 = null
    // 绑定触摸开始事件
    element.addEventListener(
      'touchstart',
      function (e) {
        // 获得触摸点的坐标
        let { clientX, clientY } = e.touches[0]
        x0 = clientX
        y0 = clientY
        // 准备启动定时器
        if (id) {
          clearTimeout(id)
          id = null
        }
        id = setTimeout(function () {
          // 执行回调函数
          callback()
        }, 750)
      },
      false
    )
    // 绑定滑动事件
    element.addEventListener(
      'touchmove',
      function (e) {
        // 判断是否是滑动事件，如果是滑动事件，就取消定时器,不执行回调函数
        let { clientX: x, clientY: y } = e.touches[0]
        // 判断滑动的距离超过10就是滑动操作，取消长按动作
        let flag = Math.abs(x - x0) > 10 || Math.abs(y - y0) > 10
        // 取消长按事件
        if (id && flag) {
          clearTimeout(id)
          id = null
        }
      },
      false
    )
    // 绑定触摸结束事件
    element.addEventListener(
      'touchend',
      function (e) {
        // 手指离开屏幕时，取消长按的动作
        if (id) {
          clearTimeout(id)
          id = null
        }
      },
      false
    )
  },
}

let box = $('.box')[0]
// eventObject.tap(box, function () {
//   console.log('box被单击了')
// })
eventObject.longtap(box, function () {
  $('.box').css('backgroundColor', 'yellow')
})
